<template>
  <div>
    <div class="flex jc-sb bg-fff pr-20">
      <HeaderTitle :textObj="textObj"></HeaderTitle>
      <el-link @click="handleAdd" type="primary">新增</el-link>
    </div>

    <el-table :data="tableData" stripe style="width: 100%" border>
      <el-table-column
        align="center"
        type="index"
        :index="indexMethod"
        label="序号"
        width="80"
      />
      <el-table-column align="center" prop="tag" label="标签" width="180" />
      <el-table-column align="center" prop="id" label="密钥" width="180" />
      <el-table-column align="center" prop="authority" label="访问权限" />
      <el-table-column align="center" prop="online" label="密钥状态" />
      <el-table-column
        align="center"
        prop="cTime"
        label="创造时间"
        width="180"
        :formatter="formatDate"
      />
      <el-table-column
        align="center"
        prop="uTime"
        label="更新时间"
        width="180"
        :formatter="formatDate"
      />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        min-width="120"
      >
        <template #default="scope">
          <el-button
            type="primary"
            :icon="Edit"
            circle
            @click="handleEdit(scope.row, scope.$index)"
          />
          <el-button
            type="danger"
            circle
            :icon="Delete"
            @click="handleDelete(scope.row, scope.$index)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增弹窗 -->
    <el-dialog
      draggable
      align-center
      v-model="addShow"
      title="新增密钥"
      width="30%"
    >
      <el-form :model="form" label-width="80px">
        <el-form-item label="标签">
          <el-input v-model="form.tag" placeholder="请输入标签" />
        </el-form-item>
        <el-form-item label="访问权限">
          <el-input v-model="form.authority" placeholder="请输入访问权限" />
        </el-form-item>
        <el-form-item label="权限状态">
          <el-select v-model="form.online" placeholder="请选择权限状态">
            <el-option label="使用中" value="true"></el-option>
            <el-option label="未使用" value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addShow = false">取消</el-button>
          <el-button type="primary" @click="saveAdd">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog
      draggable
      align-center
      v-model="editShow"
      title="编辑密钥"
      width="30%"
    >
      <el-form :model="form" label-width="80px">
        <el-form-item label="标签">
          <el-input v-model="form.tag" placeholder="请输入标签" />
        </el-form-item>
        <el-form-item label="访问权限">
          <el-input v-model="form.authority" placeholder="请输入访问权限" />
        </el-form-item>
        <el-form-item label="权限状态">
          <el-select v-model="form.online" placeholder="请选择权限状态">
            <el-option label="使用中" value="true"></el-option>
            <el-option label="未使用" value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editShow = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  $securityAdd,
  $securityList,
  $securityEdit,
  $securityDel,
} from "../../api/index";
import { ref, onMounted } from "vue";
import HeaderTitle from "../../components/HeaderTitle.vue";
import { formatDate } from "../../utils/utils";
import { Edit, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

let textObj = {
  title: "安全 ",
  name: "API访问密钥",
  dsc: " 使用访问密钥向SenseCAP API服务发出安全的REST或HTTP请求",
};
const tableData = ref([]); // 表格数据
let addShow = ref(false); // 添加弹窗
let editShow = ref(false); // 编辑弹窗
// 表单数据
const form = ref({
  tag: "",
  authority: "",
  online: "true",
});

// 当前编辑行的索引
let currentEditIndex = ref(-1);

// 获取表格数据
const getList = async () => {
  let res = await $securityList();
  tableData.value = res.data;
  tableData.value.map((item) => {
    if (item.online == true) {
      item.online = "使用中";
    } else {
      item.online = "未使用";
    }
  });
};

// 删除
const handleDelete = async (row, index) => {
  try {
    await ElMessageBox.confirm("确定要删除这条数据吗?", "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true,
    });
    await $securityDel({ id: row.id });
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    // 刷新列表
    getList();
  } catch (error) {
    console.error("删除数据失败:", error);
  }
};

// 新增
const handleAdd = async () => {
  form.value = {
    tag: "",
    authority: "",
    online: "true",
  };
  addShow.value = true;
};
const saveAdd = () => {
  if (form.value.tag && form.value.authority && form.value.online) {
    $securityAdd({
      tag: form.value.tag,
      authority: form.value.authority,
      online: form.value.online,
    }).then((res) => {
      ElMessage({
        type: "success",
        message: "新增成功",
      });
      tableData.value.unshift(res.data);
      addShow.value = false;
    });
  } else {
    ElMessage({
      type: "error",
      message: "请输入完整信息",
    });
  }
};

// 编辑
const handleEdit = (row, index) => {
  currentEditIndex.value = index;
  form.value = {
    id: row.id,
    tag: row.tag,
    authority: row.authority,
    online: String(row.online === "使用中" ? "true" : "false"),
  };
  editShow.value = true;
};
const saveEdit = () => {
  if (form.value.tag && form.value.authority && form.value.online) {
    $securityEdit({
      id: form.value.id,
      tag: form.value.tag,
      authority: form.value.authority,
      online: form.value.online,
    }).then((res) => {
      ElMessage({
        type: "success",
        message: "编辑成功",
      });
      editShow.value = false;
      // 更新表格数据
      let newRow = {
        ...res.data,
        online: res.data.online === "true" ? "使用中" : "未使用",
      };
      tableData.value.splice(currentEditIndex.value, 1, newRow);
    });
  } else {
    ElMessage({
      type: "error",
      message: "请输入完整信息",
    });
  }
};

// 定义 indexMethod 函数
const indexMethod = (index) => {
  // 这里可以自定义行号的显示逻辑，例如从 1 开始
  return index + 1;
};

onMounted(() => {
  getList();
});
</script>

<style>
</style>    